<!--  -->
<template>
  <div>
     <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
      <el-row :gutter="24">
        <el-col :span="6">
          <Menu @tree-node-click="treeNodeClick"></Menu>
        </el-col>
        <el-col :span="18">
      <!-- 商品列表区 -->
      <el-table :data="productList" highlight-current-row  border>
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          property="images"
          label="图标"
          width="100">
          <template slot-scope="scope">
      　　　　<img :src="scope.row.images" class="headimag"/>
      　　</template>
        </el-table-column>
       <el-table-column label="商品名" prop="skuName"></el-table-column>
        <el-table-column label="价格" prop="price" width="80px"></el-table-column>
        <el-table-column label="重量(kg)" prop="weight" width="90px"></el-table-column>
        <el-table-column label="销量" prop="saleCount" width="90px"></el-table-column>
        <el-table-column label="库存数量" prop="stockCount" width="90px"></el-table-column>
       
         <el-table-column label="操作" width="170px">
          <template slot-scope="scope">
            <el-button type="primary"  size="mini"
            @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="removeById(scope.row.skuId)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[10,15,20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalPage">
      </el-pagination> -->
      </el-col>
      </el-row>
    </el-card>
     <!-- 修改商品的对话框 -->
    <el-dialog
      title="修改商品信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <!-- 内容主体 -->
      <el-form
        :model="editUserForm"
        ref="editUserFormRef"
        :rules="editUserFormRules"
        label-width="100px"
      >
        <!-- <el-form-item label="图标" prop="header">
          <img :src="editUserForm.decript" alt="" class="headimag">
          <OssUpload></OssUpload>
        </el-form-item> -->
        <el-form-item label="商品名">
          <el-input v-model="editUserForm.skuName" disabled></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="editUserForm.price"></el-input>
        </el-form-item>
        <el-form-item label="重量(kg)" prop="weight">
          <el-input v-model="editUserForm.weight"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" prop="stockCount">
          <el-input v-model="editUserForm.stockCount"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Menu from './components/Menu'
// import OssUpload from '../../components/OssUpload'
export default {
  proName:"Saleproduct",
  data () {
    return {
      selectCatId:'',
      productList: [],
      // 控制商品修改对话框
      editDialogVisible: false,
      editUserFormRules:{
        weight:[{ required: true, message: '请输入商品重量', trigger: 'blur' }],
        price:[{ required: true, message: '请输入商品的最低价格', trigger: 'blur' }],
        stockCount:[{ required: true, message: '请输入商品重量', trigger: 'blur' }],
      },
      editUserForm: {},
    };
  },
  created(){
    this.getProductList()
  },
  components:{Menu},
  methods: {
    // 子组件树被点击传回来数据 node节点
    treeNodeClick(data,node,component){
      // console.log(data,node,component)
      this.selectCatId = data.catId
      this.getProductList()
    },
    // 获取商品数据
    async  getProductList(){
        this.productList = []
          const {data:res}  = await this.$http.get(`/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=${this.selectCatId}`) 
          // console.log("所有商品",res)
          res.page.list.forEach(item1=>{
            item1.skus.forEach(item =>{
              var data = {}
              data.skuId = item.skuId
              // data.publishStatus = item.publishStatus
              if(item.images.length){
                data.images = item.images[0].imgUrl
              }
              else{
                data.images = ''
              }
              data.skuName = item.skuName
              data.weight = item.weight
              data.price = item.price
              data.stockCount = item.stockCount
              data.saleCount = item.saleCount
              this.productList.push(data)
            })
          })
        // console.log(this.productList)
    },
    // 监听pageSize改变
    handleSizeChange(newSize){
      // console.log(newSize)
      this.pageSize = newSize
      this.getProductList()
    },
    // 监听页码值改变事件
    handleCurrentChange(newPage){
      // console.log(newPage)
      this.pageIndex = newPage
       this.getProductList()
    },
     // 通过Id删除商品
    async removeById (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      const { data: res } = await this.$http.post('/dqxmall/prosysskuinfo/delete',[id])
      if (res.code !== 0) {
        return this.$message.error('删除商品失败！')
      }
      this.$message.success('删除商品成功！')
      this.getProductList()
    },
    // 编辑商品信息
    async showEditDialog (row) {
      this.editDialogVisible = true
      this.editUserForm = row
    },
    // 监听修改商品对话框的关闭事件
    editDialogClosed () {
      this.$refs.editUserFormRef.resetFields()
    },
    // 修改商品信息
    async editUser () {
      console.log('this.editUserForm',this.editUserForm)
      const {data:res} = await this.$http.post("/dqxmall/prosysskuinfo/update",this.editUserForm)
      if(res.code !== 0){
        this.$message.error("修改失败")
      }
      this.getProductList()
      this.editDialogVisible = false
      this.$message.success("修改成功")
    },

  },
}
</script>
<style lang='less' scoped>
.headimag{
  height: 70px;
  width: 70px;
}
</style>